<script setup>
import { onMounted, onBeforeUnmount } from 'vue'
import { chengduPolygon } from 'src/utils/chengdu'

let map
let loca
let timeout

defineEmits(['togglePage'])
onMounted(() => {
  initMap()
})
onBeforeUnmount(() => {
  clearTimeout(timeout)
  map.destroy()
  loca.destroy()
  map = null
  loca = null
})

const isMobile = window.matchMedia('(pointer:coarse)').matches

async function initMap () {
  const layer = AMap.createDefaultLayer({ zIndex: 3 })
  map = new AMap.Map('entry-map', {
    center: [104.909617, 30.662728],
    zoom: 10,
    viewMode: '3D',
    mapStyle: 'amap://styles/4ffc570239cf659178e77df280252578',
    mask: chengduPolygon,
    layers: [layer]
  })

  const hillLayer = new AMap.TileLayer({
    getTileUrl: 'https://server.arcgisonline.com/arcgis/rest/services/Elevation/World_Hillshade/MapServer/tile/[z]/[y]/[x]/',
    zIndex: 1,
    zooms: [2, 13],
    rejectMapMask: false
  })
  hillLayer.setMap(map)

  loca = new Loca.Container({
    map
  })
  const speed = 1
  map.on('complete', () => {
    layer.setOpacity(0.3)
    loca.animate.start()
    setTimeout(() => {
      loca.viewControl.addAnimates([{
        zoom: {
          value: 13,
          control: [[0, 10], [1, 13]],
          timing: [0, 0, 0.8, 1],
          duration: 15000 / speed
        },
        center: {
          value: [104.065743, 30.657462],
          control: [[103.556681, 31.035153], [103.805247, 30.833724]], // 过渡中的轨迹控制点，地图上的经纬度
          timing: [0.42, 0, 0.4, 1], // 动画时间控制点
          duration: 15000 / speed
        }
      }], () => {
        if (!isMobile) {
          infiniteAnimation()
        }
      })
    }, 0)
  })
}

function infiniteAnimation () {
  loca.viewControl.addAnimates([{
    center: {
      value: [104.365743, 30.657462],
      control: [[104.065743, 30.657462], [104.365743, 30.657462]], // 过渡中的轨迹控制点，地图上的经纬度
      timing: [0, 0, 1, 1], // 动画时间控制点
      duration: 100000
    }
  }, {
    center: {
      value: [103.665743, 30.657462],
      control: [[104.065743, 30.657462], [103.665743, 30.657462]], // 过渡中的轨迹控制点，地图上的经纬度
      timing: [0, 0, 1, 1], // 动画时间控制点
      duration: 200000
    }
  }], () => {
    timeout = setTimeout(infiniteAnimation, 0)
  })
}
</script>

<template>
  <div id="entry-map" class="absolute-full no-pointer-events" />
  <div class="text-center full-height relative-position column flex-center q-px-lg">
    <p class="text-no-wrap" style="font-size: 5.5em; font-family: SourceHanSerifCN-Heavy, serif; color: #1f5354; line-height: 0.8em">蜀都河图</p>
    <div class="q-pb-lg text-no-wrap" style="font-size: 2em; font-family: SourceHanSerifCN-Heavy, serif">成都自然历史文化数据库</div>
    <div class="q-pb-sm" :class="{ 'text-bold': !isMobile }" style="font-size: 17px;">以地图为载体，集古旧地图、老照片、历史地名、历史河湖等为一体，由志愿者协作的成都地域文化公益开放数据库</div>
    <div class="achievement q-pb-lg" :class="{ 'text-bold': !isMobile }" style="font-size: 17px;">
      现有成果：古旧地图<strong>100</strong>幅，历史地名<strong>3500</strong>个，老照片<strong>100</strong>张
    </div>
    <q-btn label="浏览知识库" type="a" href="https://www.ditushu.com/book/52/" target="_blank" color="red" />
  </div>
  <div
    class="fixed no-pointer-events column justify-end"
    style="
      bottom: 0;
      width: 100vw;
      height: 30vh;
      z-index: 102;
    }"
  >
    <img src="/bg.jpg" style="-webkit-mask-image: -webkit-gradient(linear, left 100%, left top, from(rgba(0,0,0,0.7)), to(rgba(0,0,0,0)));width: 100vw">
  </div>
  <div class="absolute-bottom text-center" style="z-index: 103; bottom: 16px">
    <q-spinner-rings color="black" size="7em" class="absolute-center" style="padding-right: 3px;padding-bottom: 3px" />
    <q-btn icon="arrow_downward" round text-color="white" color="black" @click="$emit('togglePage', 'map')" />
  </div>
</template>

<style lang="scss">
#entry-map {
  .amap-logo, .amap-copyright {
    display: none!important;
  }
}
.achievement {
  strong {
    color: #f00;
    font-size: 20px;
    margin: 0 3px;
  }
}
</style>
